<template>
	<view class="container">
		<navbar class="header" :background="backgroundColor" back :title="title" @onBack="goBack"></navbar>
		<view class="banner">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
				<swiper-item v-for="(item,i) in bannerList" :key="i">
					<image :src="item.imgUrl"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="shop">
			<view class="top">
				<view class="titleBox">
					<view class="title">我的门店</view>
					<view class="border"></view>
				</view>
				<view class="button" @click="changeShop">
					<view class="name">切换门店</view>
					<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/changeIcon.png"></image>
				</view>
			</view>
			<view class="detail" @click="toDetail(shopDetail.id)">
				<image :src="shopDetail.imgUrl" class="shopImg"></image>
				<view class="info">
					<view class="title">{{shopDetail.name}}</view>
					<view class="lab">
						<text class="cont">{{shopDetail.tablesNum}}张台球桌</text>
						<!-- <text class="cont">团体课</text> -->
					</view>
					<view class="down">
						<view class="business">营业时间{{shopDetail.businessHours}}</view>
						<view class="distance">
							<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/locationIcon.png"></image>
							<text>{{shopDetail.distance}}km</text>
						</view>
					</view>
				</view>
			</view>
			<view class="course">
				<view class="group" @click="toLeagueDetail(shopDetail.leagueInfo.id)" v-if="shopDetail.leagueInfo">
					<text class="icon">团</text>
					<text class="cont">{{shopDetail.leagueInfo.time}} | {{shopDetail.leagueInfo.coachName}} | {{shopDetail.leagueInfo.courseTitle}}</text>
				</view>
				<view class="private" @click="toCoachDetail(shopDetail.coachInfo.cid)" v-if="shopDetail.coachInfo">
					<text class="icon">私</text>
					<text class="cont">{{shopDetail.coachInfo.time}} | {{shopDetail.coachInfo.name}} | {{shopDetail.coachInfo.title}}</text>
				</view>
			</view>
		</view>

		<view class="recharge">
			<view class="top">
				<view class="titleBox">
					<view class="title">会员充值</view>
					<view class="border"></view>
				</view>
				<view class="button" @click="payMore">
					<view class="name">全部档位</view>
					<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/arrIcon.png"></image>
				</view>
			</view>
			<view class="recommendList">
				<view v-for="(item,i) in shopDetail.recommendList" :key="i" :class="i == 1 ? 'cont big' : 'cont'">
					<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/recommendIcon.png"
						v-if="item.recommend == 1" class="recommendIcon"></image>
					<view class="presented">充<text>{{item.presented}}</text>元</view>
					<view class="recharge_amount">享受球台消费{{item.rechargeAmount}}折</view>
					<button @click="pay(item.rid)">立即充值</button>
				</view>
			</view>
		</view>

		<view class="coach">
			<view class="top">
				<view class="titleBox">
					<view class="title">私教课</view>
					<view class="border"></view>
				</view>
			</view>
			<scroll-view class="scrollView" scroll-x="true" v-if="coachList">
				<view v-for="(item,i) in coachList" :key="i" class="cont" @click="toCoachDetail(item.cid)">
					<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/coach_r_icon.png"
						v-if="item.recommend == 1" class="coach_r_icon"></image>
					<image :src="item.imgUrl" class="headPic"></image>
					<view class="name">{{item.name}}</view>
					<view class="level">{{item.level}}教练</view>
					<view class="price"><text class="symbol"></text><text class="num">{{item.price}}</text>/节起</view>
				</view>
			</scroll-view>
		</view>

		<view class="league">
			<view class="top">
				<view class="titleBox">
					<view class="title">团体课</view>
					<view class="border"></view>
				</view>
			</view>
			<view class="weekBox">
				<view v-for="(item,i) in shopDetail.leagueList" :key="i"
					:class="activeDay == i ? 'cont active' : 'cont'" @click="changeDay(i)">
					<view class="weedDay">{{i == 0 ? '今天' : item.weekDay}}</view>
					<view class="day">{{item.day}}</view>
				</view>
			</view>

			<view class="activeData">
				<view v-for="(item,i) in activeData.list" :key="i" class="cont">
					<view class="top">
						<view class="course_title">{{item.courseTitle}}</view>
						<view class="num"><text>{{item.cnum}}</text> / {{item.tnum}}人</view>
					</view>
					<view class="label">
						<text v-for="(lItem,lI) in item.label" :key="lI">{{lItem}}</text>
					</view>
					<view class="down">
						<image :src="item.imgUrl" class="imgUrl"></image>
						<text class="coach_name">{{item.coachName}}</text>
						<text class="line"></text>
						<text class="time">{{item.time}}</text>
						<button :disabled="item.status != 0"
							@click="toLeagueDetail(item.id)">{{item.status == 0 ? '预约' : '已预约'}}</button>
					</view>
				</view>
				<view v-if="activeData.list.length <= 0" class="nodata">
					<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/noCoach.png"></image>
					<view class="des">今天没有课程～</view>
				</view>
			</view>
		</view>


		<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/footer_pic.png" class="footer_pic"></image>
	</view>
</template>

<script>
	import {
		getBanner,
		getStore,
		wechatPay,
		payStatus
	} from "@/api/getData.js";
	import navbar from '@/components/NavBar.vue'
	export default {
		components:{
			navbar
		},
		data() {
			return {
				currentDate:null,
				//店铺详情数据
				shopDetail: {
					//储值列表，取前三条数据
					recommendList: [{
							rId: 0,
							recharge_amount: 100,
							presented: 5,
							recommend: 0
						},
						{
							rId: 1,
							recharge_amount: 300,
							presented: 20,
							recommend: 1
						},
						{
							rId: 2,
							recharge_amount: 500,
							presented: 50,
							recommend: 0
						}
					],
					//私教列表，返回当前店铺所有私教
					coachList: [{
							cId: 0,
							imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
							name: '王教练',
							level: 1,
							price: 120,
							recommend: 1
						},
						{
							cId: 1,
							imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
							name: '王教练',
							level: 2,
							price: 220,
							recommend: 0
						},
						{
							cId: 2,
							imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
							name: '王教练',
							level: 3,
							price: 320,
							recommend: 1
						},
						{
							cId: 3,
							imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
							name: '王教练',
							level: 1,
							price: 120,
							recommend: 0
						}
					],
					//团课列表，取当前店铺的（当前日-当前日+6）团课列表
					leagueList: [{
							day: 21,
							weekDay: '三',
							list: [{
								lId: '0',
								course_title: '10人小班基础指导10人小班基...',
								cNum: 5,
								tNum: 10,
								label: ['基础课', '进阶课'],
								imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
								coach_name: '王教练',
								time: '17:00-17:20',
								status: 0 //0-未预约，1-已预约
							}, {
								lId: '0',
								course_title: '10人小班基础指导10人小班基...',
								cNum: 5,
								tNum: 10,
								label: ['基础课', '进阶课'],
								imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
								coach_name: '王教练',
								time: '17:00-17:20',
								status: 1 //0-未预约，1-已预约
							}]
						},
						{
							day: 22,
							weekDay: '四',
							list: [{
								lId: '0',
								course_title: '1000人小班基础指导10人小班基...',
								cNum: 5,
								tNum: 10,
								label: ['基础课', '进阶课'],
								imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
								coach_name: '王教练',
								time: '17:00-17:20',
								status: 0 //0-未预约，1-已预约
							}]
						},
						{
							day: 23,
							weekDay: '五',
							list: []
						},
						{
							day: 24,
							weekDay: '六',
							list: [{
								lId: '0',
								course_title: '20人小班基础指导10人小班基...',
								cNum: 5,
								tNum: 10,
								label: ['基础课', '进阶课'],
								imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
								coach_name: '王教练',
								time: '17:00-17:20',
								status: 0 //0-未预约，1-已预约
							}]
						},
						{
							day: 25,
							weekDay: '日',
							list: [{
								lId: '0',
								course_title: '30人小班基础指导10人小班基...',
								cNum: 5,
								tNum: 10,
								label: ['基础课', '进阶课'],
								imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
								coach_name: '王教练',
								time: '17:00-17:20',
								status: 0 //0-未预约，1-已预约
							}]
						},
						{
							day: 26,
							weekDay: '一',
							list: [{
								lId: '0',
								course_title: '40人小班基础指导10人小班基...',
								cNum: 5,
								tNum: 10,
								label: ['基础课', '进阶课'],
								imgUrl: 'https://cloudcdn.noitom.com.cn/noitom2/billiard/myIcon_h.png',
								coach_name: '王教练',
								time: '17:00-17:20',
								status: 0 //0-未预约，1-已预约
							}]
						},
						{
							day: 27,
							weekDay: '二',
							list: []
						}
					]
				},
				activeDay: 0,
				activeData: null,
				bannerList: [],
				longitude: null,
				latitude: null,
				shopId: 0,
				coachList:[]
			}
		},
		onLoad(options) {},
		onShow() {

			const dd = new Date()
			const y = dd.getFullYear()
			const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
			const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
			this.currentDate = y + '-' + m + '-' + d
			// console.log(options,222222222222)
			// if (options.shopId) {
			// 	_this.shopId = options.shopId
			// }
			var _this = this
			this.activeData = this.shopDetail.leagueList[0]
			// uni.chooseLocation({
			// 	success: function(res) {
			// 		console.log('位置名称：' + res.name);
			// 		console.log('详细地址：' + res.address);
			// 		console.log('纬度：' + res.latitude);
			// 		console.log('经度：' + res.longitude);
			// 	},
			// 	fail: function(res) {
			// 		console.log(res)
			// 	}
			// });
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					_this.longitude = res.longitude
					_this.latitude = res.latitude

					getApp().globalData.longitude = res.longitude

					getApp().globalData.latitude = res.latitude
					_this.getStore()
					_this.getCoachList()
				},
				fail: function(res) {
					console.log(res)
				}
			});
			this.getBanner()
		},
		methods: {
			pay(rId) {
				this.wechatPay(rId)
			},
			async wechatPay(rId) {
				var _this = this
				const param = {
					orderType: 0,
					id: rId
				}
				const {
					data: res
				} = await wechatPay(param)
				wx.requestPayment({
					timeStamp: res.data.start.timestamp,
					nonceStr: res.data.start.nonceStr,
					package: res.data.pay.packageStr,
					signType: res.data.pay.signType,
					paySign: res.data.pay.paySign,
					success(req) {
						_this.payStatus(res.data.paymentId, res.data.start.timestamp, res.data.start.nonceStr,
							res.data.pay.packageStr, res.data.pay.paySign)

					},
					fail(e) {
						console.log(e)
					}
				})
			},
			//支付结果上报
			async payStatus(paymentId, timeStamp, nonceStr, packages, paySign) {
				const param = {
					paymentId: paymentId,
					timeStamp: timeStamp,
					nonceStr: nonceStr,
					packageStr: packages,
					paySign: paySign,
				}
				const {
					data: res
				} = await payStatus(param)
				if (res.data) {
					uni.navigateTo({
						url: "/pages/pay/paymentSuccess?odatetime=" + res.data.odatetime + "&paymentNo=" + res.data.paymentNo + "&type=" + res.data.type + "&price=" + res.data.price + ""
					});
				}

			},
			//门店详情
			async getStore() {
				const param = {
					longitude: this.longitude,
					latitude: this.latitude,
					todayDate: this.currentDate,
					storeId: getApp().globalData.shopId ? getApp().globalData.shopId : 0
				}
				const {
					data: res
				} = await getStore(param)
				this.shopDetail = res.data
				this.activeData = this.shopDetail.leagueList[0]
				getApp().globalData.shopId = res.data.id
			},
			async getCoachList() {
				const param = {
					longitude: this.longitude,
					latitude: this.latitude,
					todayDate: '2023-01-06',
					storeId: getApp().globalData.shopId ? getApp().globalData.shopId : 0
				}
				const {
					data: res
				} = await getStore(param)
				this.coachList = res.data.coachList
				console.log(this.coachList)
			},
			//轮播图
			async getBanner() {
				const {
					data: res
				} = await getBanner()
				this.bannerList = res.data
			},

			//定位
			getAddress() {
				uni.authorize({
					scope: 'scope.userLocation',
					success() {}
				})


			},
			//教练等级转换
			conversion(num) {
				switch (num) {
					case 1:
						return '初级教练'
					case 2:
						return '中级教练'
					case 3:
						return '高级教练'

				}
			},
			//选择团课日期
			changeDay(i) {
				this.activeDay = i
				this.activeData = this.shopDetail.leagueList[i]
			},
			//切换门店
			changeShop() {
				uni.navigateTo({
					url: "/pages/shop/shopList"
				});
			},
			//充值列表
			payMore() {
				uni.navigateTo({
					url: "/pages/pay/payList?storeId=" + this.shopDetail.id + ""
				});
			},
			//门店详情
			toDetail(id) {
				uni.navigateTo({
					url: "/pages/shop/shopDetail?storeId=" + id
				});
			},
			//私教详情
			toCoachDetail(cId) {
				uni.navigateTo({
					url: "/pages/course/coachDetail?cId=" + cId
				});
			},
			//团课详情
			toLeagueDetail(lId) {
				uni.navigateTo({
					url: "/pages/course/leagueDetail?lId=" + lId
				});
			}
		}
	}
</script>

<style lang="less">
	.container {
		padding: 32rpx;
	}

	.banner {
		width: 100%;
		height: 268rpx;
		border-radius: 16rpx;
		overflow: hidden;
		background: #777777;

		swiper {
			height: 100%;
		}

		image {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	// 公共title
	.top {
		display: flex;
		justify-content: space-between;

		.titleBox {
			.title {
				font-size: 34rpx;
				position: relative;
				z-index: 10;
			}

			.border {
				width: 62rpx;
				height: 10rpx;
				background: linear-gradient(90deg, #E60012, #FFFFFF);
				border-radius: 5rpx;
				position: relative;
				top: -10rpx;
			}
		}

		.button {
			width: 160rpx;
			height: 46rpx;
			border: 1px solid #A4A4A4;
			border-radius: 23rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			right: -16rpx;

			.name {
				font-size: 24rpx;
				color: #A4A4A4;
			}

			image {
				width: 23rpx;
				height: 23rpx;
				margin-left: 10rpx;
			}
		}
	}

	.shop {
		padding: 26rpx 32rpx 32rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 32rpx;

		.detail {
			display: flex;
			margin-top: 25rpx;
			justify-content: space-between;

			.shopImg {
				width: 204rpx;
				height: 204rpx;
			}

			.info {
				width: 390rpx;

				.title {
					font-size: 32rpx;
					line-height: 1;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					font-weight: bold;
					margin-top: 8rpx;
				}

				.lab {
					margin-top: 24rpx;

					.cont {
						height: 30rpx;
						background: rgba(206, 206, 206, 0.2);
						border-radius: 15rpx;
						color: #A4A4A4;
						font-size: 20rpx;
						line-height: 30rpx;
						padding: 0 18rpx;
					}
				}

				.down {
					display: flex;
					justify-content: space-between;
					margin-top: 40rpx;
					align-items: center;

					.business {
						color: #E60012;
						font-size: 24rpx;
					}

					.distance {
						image {
							width: 18rpx;
							height: 20rpx;
							margin-right: 7rpx;
						}

						text {
							color: #A4A4A4;
							font-size: 24rpx;
						}
					}
				}
			}
		}

		.course {

			.group,
			.private {
				display: flex;
				align-items: center;

				.icon {
					display: inline-block;
					width: 32rpx;
					height: 32rpx;
					line-height: 32rpx;
					border-radius: 8rpx;
					margin-right: 16rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					text-align: center;
				}

				.cont {
					font-size: 24rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 570rpx;
				}
			}

			.group {
				margin-top: 24rpx;

				.icon {
					background: linear-gradient(-16deg, #FFC97C, #F3863C);
				}
			}

			.private {
				margin-top: 16rpx;

				.icon {
					background: linear-gradient(-16deg, #FFAB96, #E60012);
				}
			}
		}
	}

	.recharge {
		height: 409rpx;
		background: url(https://cloudcdn.noitom.com.cn/noitom2/billiard/topUp_bg.png);
		background-size: 100% 100%;
		margin-top: 32rpx;
		padding: 26rpx 32rpx 32rpx;

		.top {
			.titleBox {
				.title {
					color: #fff;
				}

				.border {
					background: linear-gradient(90deg, #FFBCBF, #FE242A);
				}
			}

			.button {
				border: 1px solid #FFFFFF;

				.name {
					color: #ffffff;
				}

				image {
					width: 12rpx;
					height: 19rpx;
					margin-left: 10rpx;
				}
			}
		}

		.recommendList {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 40rpx;

			.cont {
				width: 190rpx;
				height: 228rpx;
				background: linear-gradient(-40deg, #FFFCE9, #FFD5A0);
				border-radius: 8px;
				text-align: center;
				color: #F4141F;
				line-height: 1;
				position: relative;

				.recommendIcon {
					width: 63rpx;
					height: 63rpx;
					position: absolute;
					top: 0;
					left: 0;
				}

				.presented {
					font-weight: bold;
					font-size: 28rpx;
					margin-top: 44rpx;

					text {
						font-size: 48rpx;
					}
				}

				.recharge_amount {
					font-size: 20rpx;
					margin-top: 15rpx;
				}

				button {
					width: 143rpx;
					height: 43rpx;
					border: 1px solid #F4141F;
					border-radius: 21rpx;
					margin-top: 40rpx;
					font-size: 24px;
					color: #F4141F;
					background: none;
					line-height: 38rpx;
					font-size: 24rpx;
					padding: 0;
				}
			}

			.big {
				width: 212rpx;
				height: 254rpx;

				.presented {
					margin-top: 54rpx;
				}
			}
		}
	}

	.coach {
		background: #fff;
		padding: 30rpx 0 32rpx 32rpx;
		margin-top: 35rpx;
		border-radius: 16rpx;

		.scrollView {
			white-space: nowrap;
			width: 100%;
			margin-top: 32rpx;

			.cont {
				display: inline-block;
				width: 245rpx;
				height: 409rpx;
				background: #FFFFFF;
				border: 1px solid #DFDFDF;
				border-radius: 8rpx;
				margin-right: 16rpx;
				position: relative;

				.coach_r_icon {
					width: 105rpx;
					height: 40rpx;
					position: absolute;
					right: 0;
					top: 0;
				}

				.headPic {
					width: 100%;
					height: 230rpx;
				}

				.name {
					font-size: 32rpx;
					margin-left: 12rpx;
					margin-top: 10rpx;
				}

				.level {
					color: #A4A4A4;
					font-size: 24rpx;
					margin-left: 12rpx;
					margin-top: 6rpx;
				}

				.price {
					font-size: 20rpx;
					color: #A4A4A4;
					margin-left: 12rpx;
					margin-top: 12rpx;

					.symbol {
						color: #E60012;
					}

					.num {
						font-size: 36rpx;
						color: #E60012;
					}
				}
			}
		}
	}

	.league {
		background: #fff;
		padding: 32rpx;
		margin-top: 35rpx;
		border-radius: 16rpx;

		.weekBox {
			display: flex;
			justify-content: space-between;
			margin-top: 35rpx;
			line-height: 1;
			text-align: center;

			.cont {
				.weedDay {
					font-size: 24rpx;
					color: #A4A4A4;
				}

				.day {
					width: 48rpx;
					height: 48rpx;
					background: #ffffff;
					border-radius: 50%;
					font-size: 32rpx;
					font-weight: 500;
					line-height: 48rpx;
						margin: 9rpx auto 0;
				}
			}

			.active {
				.weedDay {
					color: #E60012;
				}

				.day {
					background: #E60012;
					color: #fff;
				}
			}
		}

		.activeData {
			line-height: 1;
			margin-top: 30rpx;

			.nodata {
				image {
					display: block;
					width: 179rpx;
					height: 126rpx;
					margin: 74rpx auto 32rpx;
				}

				.des {
					font-size: 24rpx;
					color: #A4A4A4;
					text-align: center;
				}
			}

			.cont {
				border-top: 2rpx solid #E2E2E2;
				padding-top: 35rpx;

				.top {
					display: flex;
					justify-content: space-between;

					.course_title {
						width: 441rpx;
						font-size: 32rpx;
						font-weight: 600;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-weight: bold;
					}

					.num {
						font-size: 24rpx;
						color: #A4A4A4;

						text {
							font-size: 32rpx;
							color: #E60012;
						}
					}
				}

				.label {
					font-size: 24rpx;
					color: #A4A4A4;
					margin-top: 17rpx;

					text {
						margin-right: 10rpx;
					}
				}

				.down {
					height: 58rpx;
					background: #F7F7F7;
					border-radius: 29rpx;
					display: flex;
					align-items: center;
					margin: 32rpx 0;

					.imgUrl {
						width: 46rpx;
						height: 46rpx;
						margin-left: 6rpx;
						margin-right: 17rpx;
					}

					.coach_name {
						font-size: 24rpx;
					}

					.line {
						display: inline-block;
						width: 2rpx;
						height: 18rpx;
						background: #BDBDBD;
						margin: 0 16rpx;
					}

					.time {
						font-size: 24rpx;
						color: #E60012;
					}

					button {
						width: 142rpx;
						height: 58rpx;
						background: linear-gradient(158deg, #E60012, #FF5B63);
						border-radius: 29rpx;
						margin-right: 0;
						font-size: 24rpx;
						line-height: 58rpx;
						color: #FFFFFF;
					}

					button[disabled]:not([type]) {
						background: #BBBBBB;
					}
				}
			}
		}
	}

	.footer_pic {
		display: block;
		width: 251rpx;
		height: 25rpx;
		margin: 32rpx auto 0;
	}
</style>
